feat(motion): adopt spring tokens and add shared CSS-transition helper - #5112

Have you considered typing this style as CSSStyle<ViewStyle> like in Checkbox.tsx?

Good call, done! Badge renders Animated.Text, so I've updated it to CSSStyle<TextStyle>.

Should the checkmark spring be fast.spatial, like Switch and FAB? M3 maps fast to small components, slow to full-screen.

getTransition ignores theme.animation.scale. On main, Badge used 150 * scale, so this is a regression for Badge. A theme with animation: { scale: 0 } (often used to turn off animations in tests and screenshots) still fades the Badge for 150 ms now, and scale: 2 no longer slows it down. Surface, Chip and Button still multiply their durations by theme.animation.scale, so helper users now behave differently from those components.

Multiply the token by the scale and keep the reduceMotion check (a component-level theme prop can override the scale that PaperProvider sets for reduced motion):

motion.test.ts then needs animation: { scale: 1 } in its theme, plus a test that a scale of 0 gives a duration of 0. (via Claude, verify if it makes sense)

Good catch, that was a real regression. Fixed it, duration is multiplied by theme.animation.scale again, same as Surface, Chip and Button. Added two tests covering scale 2x and scale 0.

The repo does not define a "CSS tier" or a "reduce-motion contract". The same goes for "the motion decision rule" in src/components/TextInput/hooks.ts line 32. A reader cannot look these up. The documented rule is the useReduceMotion JSDoc in src/theme/accessibility/ReduceMotionContext.tsx, and it says to keep opacity and color animations when reduced motion is on. This helper zeroes every property, opacity included (Badge, the Checkbox fill, the TextInput input fade). Either follow that rule or update the useReduceMotion doc. Then describe the behavior in plain words here and in hooks.ts, for example "Sets the duration to 0 when reduceMotion is true, because Reanimated's ReduceMotion option has no effect on CSS transitions." (via Claude, verify if it makes sense)

Fair point, fixed both things. Reworded the comments so they don't reference a "CSS tier" or "decision rule" anymore and point to the useReduceMotion JSDoc instead. Also fixed the opacity cases, Badge's fade, Checkbox's fill/outline cross-fade and TextInput's input fade now pass false instead of reduceMotion, so they keep animating under reduced motion like the contract says.

The check animation runs on a shared value with withSpring, but it is driven by the checked prop and not by a gesture or scroll. The project rule is to use Reanimated CSS transitions (transitionProperty and transitionDuration, as in Badge.tsx and Checkbox.tsx) for state changes, and to keep shared values for gesture or scroll driven motion. Please move the check scale and the icon scale to CSS transitions on transform. Reanimated 4.3 exports linear(...), so you can keep the fast.spatial spring shape by sampling it into linear() points for transitionTimingFunction. With that change, the useMemo and the effect go away. (via Claude, verify if it makes sense)

I'd rather keep this one as withSpring. The checkmark gets toggled by quick taps, so it's common for the animation to get interrupted mid flight and reverse. withSpring picks up from the current position and velocity when that happens, so the reversal looks physically continuous. A linear() curve sampled from the spring only matches one specific start to end run, if it gets interrupted and restarted the sampled points no longer match the remaining distance, so the motion would snap or look off on rapid re-taps.

That's basically why the original task treats MD3 spring motion as an exception to "CSS by default", it's for motion that's genuinely spring shaped and needs to handle interruption correctly, which this is, even though the trigger is a prop rather than a gesture. Happy to revisit if you feel strongly, but wanted to explain the reasoning first.